<template>
  <div>
    <h1>HOME</h1>
    <div>
              <!-- 
        如果直接使用router-link组件进行导航,被称作为声明式路由导航
        router-link声明式导航底层仍然使用的是编程式路由导航,已经默认帮我们解决了重复导航的bug
          - to属性:就是push方法接受的第一个参数location
          - replace属性:替换历史记录
          - tag属性:想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航
          - active-class属性:设置链接激活时使用的 CSS 类名
       -->
     <router-link to="/home/news" tag="button" active-class="active">新闻</router-link>
      <router-link
        :to="{
          path: '/home/music',
        }"
        tag="button" 
        active-class="active"
        >音乐</router-link
      >
      <router-link
        :to="{
          name: 'Game',
        }"
        tag="button" 
        active-class="active"
        >游戏</router-link
      >
    </div>
    <div>
      <router-link to="/home/news" replace>新闻repalce</router-link>
      <router-link
        :to="{
          path: '/home/music',
        }"
        replace
        >音乐repalce</router-link
      >
      <router-link
        :to="{
          name: 'Game',
        }"
        replace
        >游戏repalce</router-link
      >
    </div>
    <keep-alive>
          <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
    name:"Home",
}
</script>

<style scoped>
.active{
    background-color: yellow;
}
</style>